<template>
  <el-card shadow="never" header="语言主题">
    <el-form ref="form" label-width="120px" style="margin-top: 20px">
      <el-form-item :label="$t('user.nightmode')">
        <el-switch
          v-model="config.dark"
          inline-prompt
          active-icon="el-icon-moon"
          inactive-icon="el-icon-sunny"
        ></el-switch>
        <div class="el-form-item-msg">{{ $t("user.nightmode_msg") }}</div>
      </el-form-item>
      <el-form-item label="主题颜色">
        <el-color-picker v-model="config.colorPrimary" :predefine="colorList"
          >></el-color-picker
        >
      </el-form-item>
      <!-- <el-form-item :label="$t('user.language')">
        <el-select v-model="config.lang">
          <el-option label="简体中文" value="zh-cn"></el-option>
          <el-option label="English" value="en"></el-option>
        </el-select>
        <div class="el-form-item-msg">{{ $t("user.language_msg") }}</div>
      </el-form-item> -->
    </el-form>
  </el-card>
</template>

<script>
import colorTool from "@/utils/color";

export default {
  data() {
    return {
      colorList: [
        "#318CF2",
        "#009688",
        "#536dfe",
        "#ff5c93",
        "#c62f2f",
        "#fd726d",
      ],
      config: {
        lang: this.$TOOL.data.get("APP_LANG") || this.$CONFIG.LANG,
        dark: this.$TOOL.data.get("APP_DARK") || false,
        colorPrimary:
          this.$TOOL.data.get("APP_COLOR") || this.$CONFIG.COLOR || "#318CF2",
      },
    };
  },
  watch: {
    "config.dark"(val) {
      if (val) {
        document.documentElement.classList.add("dark"); 
        this.$TOOL.data.set("APP_DARK", val);
      } else {
        document.documentElement.classList.remove("dark");
        this.$TOOL.data.remove("APP_DARK");
      }
    },
    "config.lang"(val) {
      this.$i18n.locale = val;
      this.$TOOL.data.set("APP_LANG", val);
    },
    "config.colorPrimary"(val) {
      document.documentElement.style.setProperty("--el-color-primary", val);
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(
          `--el-color-primary-light-${i}`,
          colorTool.lighten(val, i / 10)
        );
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(
          `--el-color-primary-dark-${i}`,
          colorTool.darken(val, i / 10)
        );
      }
      this.$TOOL.data.set("APP_COLOR", val);
    },
  },
};
</script>

<style>
</style>
